<template>
  <div id="shop-home-page" class="shop-page"
       :style="{
    height:(getWinSize().height-60-this.getSafeArea().top)+'px'
  }"
       v-loading="loading"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(255, 255, 255, 0.8)"
  >
    <!--店铺头部-->
    <shop-header v-if="shop.id>0" :style="{top:(this.getSafeArea().top-4)+'px'}" :shop="shop"/>
    <!--经营分类-->
    <div id="shop-product-classify-box" style="position: relative; z-index: 0"
         :style="{top:(this.getSafeArea().top+160)+'px'}"
    >
      <div class="content">
        <div class="title">
          经营类目
        </div>
        <div class="list-item">
          <div class="item" v-for="(item,index) in shop.classifyArr" :key="index" v-text="item.name" v-if="item.count>0 && item.name"></div>
          <div class="c"></div>
        </div>
      </div>
    </div>
    <!--店铺banner-->
    <div id="shop-banner" style="position: relative;"
         :style="{
      top:(165+this.getSafeArea().top)+'px',
    }" class="swiper-banner" v-if="shop.bannerArr.length>0">
      <div class="swiper-wrapper" v-if="shop.bannerArr.length>0">
        <div class="swiper-slide" v-for="(item,key) in shop.bannerArr" :key="key">
          <img class="home-banner-image" :src="item">
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <!--  推荐商品  -->
    <i-scroller-box
      id="product-list"
      ref="i-scroller-box"
      :url="'ShopProduct/getList'"
      :height="getProductListHeight()"
      style="position: relative;"
      :style="{
      top:(165+this.getSafeArea().top)+'px',
      height: getProductListHeight()+'px'
      }">
      <template v-slot:list-item="{index,data}">
        <product-list-item :index="index" :show-type="0" :curr-product="data"></product-list-item>
      </template>
    </i-scroller-box>


    <shop-bottom-nav/>
  </div>
</template>

<script>
import ShopHeader from '../common/ShopHeader'
import ProductListItem from '../common/ProductListItem'
import ShopBottomNav from '../common/ShopBottomNav'
import IScrollerBox from '../common/IScrollerBox'
import Viewer from 'viewerjs'

export default {
  name: 'ShopHome',
  components: {IScrollerBox, ShopBottomNav, ProductListItem, ShopHeader},
  data: function () {
    return {
      loading:false,
      shop: {
        "id": 0,
        "number": "115321",
        "name": "国美电器",
        "logo": "http://image.yangfankj.com/shop/logo/11.jpg",
        "classifyName": [
          "电子商品"
        ],
        "bannerArr": [],
        "province": "陕西省",
        "city": "西安市",
        "cityCode": "029",
        "county": "雁塔区",
        "address": "太白北路97号",
        "location": [
          "108.929723",
          "34.244161"
        ],
        "mobile": "15563663314",
        "productNums": 6,
        "collectNums": 2,
        "score": 80,
        "expressScore": 80,
        "businessStatus": {
          "name": "营业中",
          "id": 1
        },
        "businessTime": [
          "08:30",
          "20:00"
        ],
        "businessStopInfo": "",
        "distance": null,
        "expressPrice": 20,
        "freeExpressPrice": 100,
        "fullMinusPrice": [
          {
            "minus": 5,
            "full": 100
          },
          {
            "minus": 25,
            "full": 200
          },
          {
            "minus": 50,
            "full": 300
          },
          {
            "minus": 70,
            "full": 500
          }
        ],
        "isSameCitySend": 0
      },
      productList: []
    }
  },
  mounted () {
    this.getDetail()
    this.getLastNotice()
    this.getProductList()
  },
  methods: {
    getProductListHeight:function () {
      var height=this.getWinSize().height-this.getSafeArea().top-240
      if (this.shop.bannerArr.length>0){
        height-=Math.ceil(this.getWinSize().width*0.5)
      }
      return height
    },
    getDetail: function () {
      let $this = this
      $this.isLoading = true
      $this.getPositionAndCallBack(function (currLocation) {
        $this.MyRequest($this.ApiDoNameMember + 'Shop/getDetail', {
          currLocation:currLocation,
          id: $this.$route.query.id
        }, function (data) {
          $this.isLoading = false
          $this.shop = data
          $this.$forceUpdate()
          if (data.bannerArr.length>0){
            setTimeout(function () {
              $this.setBanner()
            }, 500)
          }
        }, function (data) {
          $this.isLoading = false
          $this.successTip(data.message, 'error')
        })
      })
    },
    setBanner: function () {
      var swiper = new Swiper('.swiper-banner', {
        // 底部分页导航
        pagination: {
          el: '.swiper-pagination',
        },
        // 自动播放
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        // 切换效果:    默认=>滑动    fade=>渐入   cube=>盒子旋转  coverflow=>平面切换 flip=>平面翻转
        // effect : 'fade',
      })

      // 处理轮播图点击
      const gallery1 = new Viewer(document.getElementById('shop-banner'))
    },
    // 商品列表
    getProductList:function () {
      this.$refs['i-scroller-box'].getList({
        form:{
          shopId: this.$route.query.id,
          sortOrder:'DESC',
          sortProp:'id',
          pageSize:30
        }
      })
    },
    getLastNotice:function () {
      let $this = this
      var id=0
      var key='ShowNotice_'+$this.$route.query.id+'_1'
      if (!localStorage.getItem(key)){
        id=0
      }else{
        id=localStorage.getItem(key)
      }
      $this.MyRequest($this.ApiDoNameMember + 'Shop/getLastNotice', {
        shopId: $this.$route.query.id,
        id:id?id:0
      }, function (data) {
        if (!data || !data.id){
          return
        }
        $this.bus.$emit('ShowNoticeDialogCallBus',data,1)
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
        // $this.form.password = ''
      })
    },
  }
}
</script>

<style scoped>

</style>
